<template>
  <div>
    <el-button type="text" icon="el-icon-plus" size="mini" @click="addPart">添加</el-button>
    <el-dialog
      v-dialogDrag
      ref="addPart"
      :visible.sync="partDialogVisible"
      :close-on-click-modal="false"
      :before-close="clear"
      title="配件选择"
      append-to-body
      width="80%"
    >
      <el-form
        ref="addForm"
        label-position="right"
        label-width="101px"
        size="mini"
        status-icon
      >
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="storageNameQuery" label="仓库名称">
              <el-input v-model="partSearch.storageNameQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="partNoQuery" label="配件代码">
              <el-input v-model="partSearch.partNoQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="partNameQuery" label="配件名称">
              <el-input v-model="partSearch.partNameQuery" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="6">
          <el-col :xs="24" :sm="24" :md="24" style="text-align: right;">
            <el-button :disabled="saveLoading" type="primary" @click="searchHandle();">查询</el-button>
            <el-button :disabled="saveLoading" type="primary" @click="resetForm()">重置</el-button>
          </el-col>
        </el-row>

      </el-form>

      <div class="table">
        <div class="tableHead">
          <div class="title">配件信息</div>
        </div>
        <el-form ref="partForm">
          <el-table
            v-loading="noPageLoad"
            ref="orderPartTable"
            :data="partList"
            :stripe="false"
            border
            @selection-change="select"
          >
            <el-table-column label="序号" width="50" type="index"/>
            <el-table-column type="selection" min-width="40"/>
            <el-table-column prop="STORAGE_NAME" label="仓库" min-width="130" show-overflow-tooltip/>
            <el-table-column prop="PART_NO" label="配件代码" min-width="130" show-overflow-tooltip/>
            <el-table-column prop="PART_NAME" label="配件名称" min-width="160" show-overflow-tooltip/>
            <el-table-column prop="availableQuantity" label="可用库存" min-width="80"/>
            <el-table-column prop="STOCK_QUANTITY" label="账面库存" min-width="80"/>
            <el-table-column prop="MIN_STOCK" label="最小库存" min-width="80"/>
            <el-table-column prop="MAX_STOCK" label="最大库存" min-width="80"/>
            <!-- <el-table-column :formatter="filterCode" type="1300" prop="PART_TYPE" label="配件类别" min-width="90"/> -->
            <el-table-column prop="REMARK" label="备注" min-width="80"/>
          </el-table>

          <div style="text-align:center">
            <Pagination :data="page" @change-size="handleSizeChange" @change-page="handleCurrentChange"/>
          </div>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="text">
          <i class="el-icon-search magnifier" />
        </el-button>
        <el-button :disabled="saveLoading" type="primary" @click="confirmHandle()">确定</el-button>
        <el-button :disabled="saveLoading" @click="clear">关闭</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import {
  queryStockPartList
} from '@/api/part/dms/storemanage/safetyStock'
import Pagination from '@/components/Pagination'
import rSelect from '@/components/Select/Select'
import selectDealer from '@/components/basedata/selectPartDealer'
import selectPartItems from '@/components/part/orderSelectPart'
import formMixins from '@/mixins/formMixins'
import { mapGetters } from 'vuex'
// import _ from 'lodash'

export default {
  name: 'PartOrderAdd',
  components: {
    selectPartItems,
    selectDealer,
    Pagination,
    rSelect
  },
  mixins: [formMixins],
  props: {
    title: {
      type: String,
      default: ''
    },
    operation: {
      type: String,
      default: 'view'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      partSearch: {
        partNoQuery: '',
        partNameQuery: '',
        storageNameQuery: '',
        limit: 10,
        pageNum: 1
      },
      page: {},
      multipleSelection: [], // 选中的配件
      partList: [],
      activeNames: ['1', '2'],
      partDialogVisible: false,
      noPageLoad: false,
      saveLoading: false
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'systemParam'])
  },
  watch: {
  },
  mounted() {
    // this.showSaleOrg()
  },
  methods: {
    // 查询
    searchHandle() {
      this.load = true
      queryStockPartList(this.partSearch)
        .then(res => {
          this.partList = res.rows
          this.page = res
          this.load = false
        })
        .catch(err => {
          this.load = false
        })
    },
    addPart() {
      this.partDialogVisible = true
    },
    resetForm() {
      this.partSearch = {
        partNoQuery: '',
        storageNameQuery: '',
        partNameQuery: ''
      }
    },
    // 选择分页
    handleSizeChange(size) {
      this.partSearch.limit = size
      this.searchHandle()
    },
    handleCurrentChange(page) {
      this.partSearch.pageNum = page
      this.searchHandle()
    },
    // 选择
    select(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    // 确定
    confirmHandle() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择数据!'
        })
      } else {
        const dataList = []
        this.multipleSelection.forEach(element => {
          const data = {
            partStockId: element.PART_STOCK_ID,
            dealerCode: element.DEALER_CODE,
            dealerName: element.DEALER_NAME,
            storageId: element.STORAGE_ID,
            storageName: element.STORAGE_NAME,
            storageAreaCode: element.STORAGE_AREA_CODE,
            storagePositionCode: element.STORAGE_POSITION_CODE,
            partId: element.PART_ID,
            partNo: element.PART_NO,
            partCode: element.PART_NO,
            partName: element.PART_NAME,
            unit: element.UNIT,
            availableQuantity: element.availableQuantity,
            stockQuantity: element.STOCK_QUANTITY,
            maxStock: element.MAX_STOCK,
            minStock: element.MIN_STOCK,
            remark: element.REMARK
          }
          dataList.push(data)
        })
        this.$emit('getItemInfo', dataList)
        this.clear()
      }
    },

    resetObj(obj) {
      for (const key in obj) {
        obj[key] = ''
      }
    },

    // 返回清空列表
    clear() {
      this.resetObj(this.partSearch)
      this.multipleSelection = []
      this.partList = []
      this.partDialogVisible = false
    }

  }
}
</script>

<style>
</style>
